<template>
  <div id="barcharts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    datas: Array,
  },
  data: function () {
    return {
      options:{},
      chart:""
    };
  },
  mounted: function () {
    this.options = {
      title: {
        text: "出库前六名",
      },
      tooltip: {
        trigger: "item",
      },
      // legend: {
      //   // top: "5%",
      //   right: "right",
      // },
      series: [
        {
          type: "pie",
          radius: ["30%", "70%"],
          center: ["50%", "50%"],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 1,
          },
          // label: {
          //   show: false,
          //   position: "center",
          // },
          emphasis: {
            label: {
              show: true,
              fontSize: "12",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data:this.datas,
        },
      ],
    };
    this.chart = echarts.init(document.getElementById("barcharts"));
    this.chart.setOption(this.options);
  },
  watch:{
    datas:{
      handler(nd){
        this.options.series[0].data=nd;
        this.chart = echarts.init(document.getElementById("barcharts"));
        this.chart.setOption(this.options);
      },
      deep:true
    }
  }
};
</script>

<style>
#barcharts {
  height: 200px;
  width: 350px;
}
</style>